import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";
export default class Message extends Component {
  state = {
    messageArr: [
      { id: "1", title: "消息1" },
      { id: "2", title: "消息2" },
      { id: "3", title: "消息3" },
    ],
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((mesObj) => {
            return (
              <li key={mesObj.id}>
                {/* <Link to={`/home/message/detail?id=${mesObj.id}&title=${mesObj.title}`}>{mesObj.title}</Link>&nbsp;&nbsp; */}
                <Link
                  to={{
                    pathname: "/home/message/detail",
                    state: {
                      id: mesObj.id,
                      title: mesObj.title,
                    },
                  }}
                >
                  {mesObj.title}
                </Link>
                &nbsp;&nbsp;
                {/* <Link to={`/home/message/detail/${mesObj.id}/${mesObj.title}`}>{mesObj.title}</Link>&nbsp;&nbsp; */}
              </li>
            );
          })}
        </ul>
        <hr />
        <Route path="/home/message/detail" component={Detail} />
        {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}
      </div>
    );
  }
}
